<template>
  <div>
    <div class="parkManagement" style="padding:20px 20px 10px 20px;">
      <div class="yuanqu">
        <div style="display:flex;width: 100%">
          <div style="margin-right: 1.4%;width: 100%">
            <div class="left_baidu" style="overflow: hidden">
              <div class="intrdouce">{{msg}}</div>
              <baidu-map
                :center="center"
                :zoom="zoom"
                @ready="handler"
                style="margin: 5px; height: 710px;width: 100%; z-index: 10;"
                @click="getClickInfo"
                :scroll-wheel-zoom="true"
              >
                <bm-map-type :map-types="['BMAP_NORMAL_MAP', 'BMAP_HYBRID_MAP']" anchor="BMAP_ANCHOR_BOTTOM_RIGHT"></bm-map-type>
              </baidu-map>
            </div>
          </div>
          <div>
            <div class="right_all">
              <el-row class="right_top">
                <div style="font-size:18px; margin:20px;color: #333333;font-weight:700; text-align:center; width:150;">园区经济</div>
                <div ref="parkRank" style="width: 100%;height:290px;"></div>
                <div v-if="parkRankDate === 1" style="color: #909399;text-align: center;margin-top: -50%;">暂无数据</div>
              </el-row>
              <el-row class="right_center">
                <div style="font-size:18px; margin-top:20px; color: #333333; font-weight:700; text-align:center; width:100%;">企业统计</div>
                <div style="display:flex">
                  <el-date-picker
                    v-model="year1"
                    type="year"
                    :picker-options="pickerOptions"
                    :clearable="false"
                    :editable="false"
                    style="width: 110px; margin: 20px 20px 10px 20px"
                    @change="enterpriseStatisticsSelectChange"
                    placeholder="选择年">
                  </el-date-picker>
                  <el-select v-model="enterpriseStatisticsSelect" @change="enterpriseStatisticsSelectChange" style="width: 240px; margin: 20px 0px 10px 35px" placeholder="请选择">
                    <el-option
                      v-for="item in enterpriseStatisticsOptions"
                      :key="item.value"
                      :label="item.label"
                      :value="item.value">
                    </el-option>
                  </el-select>
                </div>
                <div style="width: 440px;height:200px;margin-top:10px;">
                  <el-table
                    :data="entList"
                    class="customer-table"
                    :row-style="{height:'32px'}"
                    :cell-style="{padding:'0px'}"
                    style="width: 95%;margin-left:10px"
                    height="210px"
                    :header-cell-style="{background:'#F7F8FA', color: '#333333'}">
                    <el-table-column type="index"  label="序号" width="70px" header-align="center" align="center"></el-table-column>
                    <el-table-column prop="entName" :show-overflow-tooltip="true" label="企业名称"></el-table-column>
                  </el-table>
                </div>
                <div v-if="statistics === 1" style="color: #909399;text-align: center;margin-top: -35%;">暂无数据</div>
              </el-row>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="functionTitle">能源消耗</div>
    <div class="energyConsumption">
      <div class="top">
        <!-- 化工行业万元能耗园区排名 -->
        <div class="top-first">
          <div class="top-title">园区万元产值综合能耗</div>
          <div class="top-sel" style="padding-left:30px">
            <el-select class="select1" v-model="parkRankValue" placeholder="请选择" @change="changeParkRank">
              <el-option v-for="item in parkRank" :key="item.value" :label="item.label" :value="item.value">
              </el-option>
            </el-select>
            <span style="margin-left:10px">吨标煤/万元</span>
            <div v-if="topOneShow === 1" style="color: #909399; margin-top: 130px;margin-left: 130px;"> 暂无数据</div>
          </div>
          <div id="energy-annular1" style="width: 100%;height:320px;padding:0 30px;"></div>
        </div>
        <!-- 浙江省化工产业2021年累计总能消耗 上二-->
        <div class="top-two">
          <div class="top-title">园区本年度累计总能耗</div>
          <div id="energy-annular2" style="width:100%;height:390px"></div>
          <div v-if="topTwoData === 1" style="color: #909399; margin-top: -200px;margin-left: 150px;"> 暂无数据</div>
        </div>
        <!-- 化工行业万元能耗产业排名 -->
        <div class="top-first">
          <div class="top-title">园区万元产值综合能耗产业排名</div>
          <div class="top-sel" style="padding-left:30px">
            <el-select class="select1" v-model="industryRankValue" placeholder="请选择" @change="changeIndustryRank">
              <el-option v-for="item in industryRank" :key="item.value" :label="item.label" :value="item.value">
              </el-option>
            </el-select>
            <span style="margin-left:10px">吨标煤/万元</span>
          </div>
          <div id="energy-annular3" style="width: 100%;height:320px;padding:0 30px;"></div>
          <div v-if="showData === 1" style="    color: #909399;margin-top: -200px;margin-left: 150px;"> 暂无数据</div>
        </div>
      </div>
      <div class="bottom">
        <!-- 园区能源用能额度分析 -->
        <div class="bottom-first">
          <div class="bottom-title">园区能源用能额度分析</div>
          <div id="energy-annular5" style="width: 100%;height:440px;padding:0 30px;"> </div>
          <div v-if="bottomOneShow === 1" style="color: #909399; margin-top: -330px;margin-left: 150px;"> 暂无数据</div>
        </div>
        <!-- 浙江省化工产业月度能耗趋势 -->
        <div class="bottom-two">
          <div class="bottom-title-two">园区月度能耗趋势</div>
          <div id="energy-annular4" style="width:100%;height:440px"></div>
          <div v-if="bottomTwoData === 1" style="color: #909399;margin-top: -330px;margin-left: 150px;"> 暂无数据</div>
        </div>
        <!-- 行业主要产品单位产品能耗 -->
        <div class="bottom-first">
          <div class="bottom-title">化工园区主要产能单位产品能耗</div>
          <div class="bottom-sel">
            <el-cascader
              v-model="energyConsumptionValue"
              placeholder="请选择"
              :options="energyConsumption"
              :props="{ value: 'code', label: 'name' }"
              @change="changeEnergyConsumption">
            </el-cascader>
          </div>
          <div class="bottom-tab">
            <el-table :data="tableData2" max-height="387px" :header-cell-style="{ background: '#F3F4F7',color:'#333333'}" style="width: 100%;padding-top: 10px;">
              <el-table-column prop="name" label="产品名称" show-overflow-tooltip min-width="78">
              </el-table-column>
              <el-table-column prop="consumption" show-overflow-tooltip label="单位产品能耗" align="center" width="105">
              </el-table-column>
              <el-table-column prop="nationalStandard" show-overflow-tooltip label="国家标准" align="center" min-width="78">
              </el-table-column>
              <el-table-column prop="IndustryStandard" show-overflow-tooltip label="行业标准" align="center" min-width="78">
              </el-table-column>
            </el-table>
          </div>
        </div>
      </div>
    </div>
    <div class="functionTitle">生产安全</div>
    <div class="safetyProduction">
      <div id="securitybottom">
        <div style="display: flex;">
          <div style="margin-right: 1.4%;margin-left: 1.4%;width:48%">
            <div class="safePersonCount">
                <div class="safePersonCount_title">
                  <span class="title_sty">园区专职安全人员数量</span>
                </div>
                <div class="safePersonCount_charts">
                  <div id="safety-annular1" ref="safety-annular1" style="width: 100%;height: 260px"></div>
                </div>
            </div>
          </div>
          <div style="margin-right: 1.4%;width:48%">
            <div class="warnControll">
                <div class="safePersonCount_title">
                  <span class="title_sty">风险管控</span>
                </div>
                <!-- <div style="float:right;margin-right:8%;">
                  <el-checkbox v-model="checked"  @change="handleCheckChange" style="margin-top:10px">显示平均值</el-checkbox>
                </div> -->
                <div class="warnControll_charts">
                  <div id="safety-annular2" ref="safety-annular2" style="width:100%;height:260px"></div>
                </div>
            </div>
          </div>
        </div>
      </div>
      <div class="subject">
        <div class="tab">
          <div class="Unit">
            <div class="Unit-title">报警趋势分析</div>
            <div style="display:flex">
              <el-button-group style="margin:0px 0px 0px 1.4%">
                <el-button @click="energyTrend('day')" size="small">日</el-button>
                <el-button @click="energyTrend('month')" size="small">月</el-button>
                <el-button @click="energyTrend('year')" size="small">年</el-button>
              </el-button-group>
            </div>
            <div class="majorHazardAnalysis_charts">
              <div id="safety-annular3" ref="safety-annular3" style="width:100%;height:300px"></div>
            </div>
          </div>
          <div class="Unit">
            <div class="Unit-title4">园区事故</div>
            <div class="Unit-tab">
              <div class="majorHazardAnalysis_charts">
                <div id="safety-annular4" ref="safety-annular4" style="width:100%;height:310px"></div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="functionTitle" style="margin-top: 10px">环境保护</div>
    <div id="environmental" class="environmental">
      <div>
        <div class="shadow" style="display:flex;background-color: #FFFFFF;padding-top:16px;">
          <div class="rightTable">
            <div class="tree_title" style="width:100%">碳排放管理</div>
            <div style="height: 32px;margin-bottom:16px;">
              <div class="tableSearch">
                <el-button :type="searchParams.dateWindow === '0' ? 'primary' : ''" size="small" @click="changeCarbonType('0')" style="width: 54px;margin-left:20px;">日</el-button>
                <el-button :type="searchParams.dateWindow === '1' ? 'primary' : ''" size="small" @click="changeCarbonType('1')" style="width: 54px;">月</el-button>
                <el-button :type="searchParams.dateWindow === '2' ? 'primary' : ''" size="small" @click="changeCarbonType('2')" style="width: 54px;">年</el-button>
                <el-date-picker
                  v-model="searchParams.searchDate"
                  class="w180 searchDay"
                  :format="carbonDatePickerParam.format"
                  value-format="yyyy-MM-dd"
                  :type="carbonDatePickerParam.type"
                  size="small"
                  :placeholder="carbonDatePickerParam.placeholder"
                  :picker-options="pickerOption"
                  :clearable="false"
                  @change="searchAction"
                  :editable="false"
                  popper-class="report-data-picker-top">
                </el-date-picker>
              </div>
            </div>
            <div class="tableDiv">
              <div>
                <el-table
                  :data="tableData"
                  border
                  :span-method="arraySpanMethod"
                  :height="352"
                  :header-cell-class-name="tableHeadClassName"
                  :row-class-name="tableRowClassName"
                  class="table_sty"
                  v-loading="loading.tableLoading">
                  <el-table-column prop="no" show-overflow-tooltip align="center" label="序号" min-width="60" ></el-table-column>
                  <el-table-column prop="name" show-overflow-tooltip align="center" label="排放因子数据" min-width="120" ></el-table-column>
                  <el-table-column prop="monthSum" show-overflow-tooltip  align="center" label="月累计" ></el-table-column>
                  <el-table-column prop="yearSum" show-overflow-tooltip  align="center" label="年累计" ></el-table-column>
                  <el-table-column v-for="(item, index) in tableColumList" align="center" :key="index" min-width="120" :label="item" >
                    <template slot-scope="scope">
                    <span>{{scope.row.dayList[index]}}</span>
                    </template>
                  </el-table-column>
                </el-table>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="shadow" style="padding: 20px;margin-top:20px">
        <div class="tree_title" style="width:100%">空气质量</div>
        <div class="titleDiv">
          <div style="display: flex;float: left;">
            <el-button :type="airDiv === 'year' ? 'primary' : ''" size="small" @click="airChange('year')" style="width: 68px;">年度</el-button>
            <el-button :type="airDiv === 'quarter' ? 'primary' : ''" size="small" @click="airChange('quarter')" style="width: 68px;">季度</el-button>
            <el-button :type="airDiv === 'month' ? 'primary' : ''" size="small" @click="airChange('month')" style="width: 68px;">月度</el-button>
          </div>

          <div class="timeSelect">
            <el-date-picker
              v-model="airDate"
              @change="airChangeYear"
              size="small"
              :format="airDatePickerParam.format"
              value-format="yyyy-MM-dd"
              :type="airDatePickerParam.type"
              placeholder="选择日期"
              style="width:180px;float:left;"
              :clearable="false"
              :picker-options="pickerOption"
              v-show="airDiv === 'year' || airDiv === 'month'"
              :editable="false"
              popper-class="report-data-picker-top">
            </el-date-picker>
            <quarter :defaultValue="airDate" :getValue="getAirQuarter" v-show="airDiv === 'quarter'"></quarter>
          </div>
          <el-select v-model="airParameter" placeholder="请选择空气指标" size="small" class="w180" @change="airParameterChange" style="float: left;">
            <el-option v-for="item in airOptions" :key="item.value" :label="item.label" :value="item.value"></el-option>
          </el-select>
          <div style="font-size: 16px;font-weight: 500;color: #333333;line-height: 22px;">
            {{airParamName}}：{{airComputed}}
          </div>
        </div>
        <div style="width: 100%;margin-top: 20px">
          <div id="environmental-annular1" ref="environmental-annular1" style="width: 100%;height: 270px"></div>
        </div>
      </div>
      <div class="shadow" style="padding: 20px;margin-top:20px;">
        <div class="tree_title" style="width:100%">水质监测</div>
        <div class="titleDiv">
          <div style="display: flex;float: left;">
            <el-button :type="waterDiv === 'year' ? 'primary' : ''" size="small" @click="waterChange('year')" style="width: 68px;">年度</el-button>
            <el-button :type="waterDiv === 'quarter' ? 'primary' : ''" size="small" @click="waterChange('quarter')" style="width: 68px;">季度</el-button>
            <el-button :type="waterDiv === 'month' ? 'primary' : ''" size="small" @click="waterChange('month')" style="width: 68px;">月度</el-button>
          </div>
          <div class="timeSelect">
            <el-date-picker
              v-model="waterDate"
              @change="waterChangeYear"
              size="small"
              :format="waterDatePickerParam.format"
              value-format="yyyy-MM-dd"
              :type="waterDatePickerParam.type"
              placeholder="选择日期"
              style="width:180px;float:left;"
              :clearable="false"
              :picker-options="pickerOption"
              v-show="waterDiv === 'year' || waterDiv === 'month'"
              :editable="false"
              popper-class="report-data-picker-top">
            </el-date-picker>
            <quarter :defaultValue="waterDate" :getValue="getWaterQuarter" v-show="waterDiv === 'quarter'"></quarter>
          </div>
          <el-select v-model="waterParameter" placeholder="请选择水质指标" size="small" class="w180" @change="waterParameterChange" style="float: left;">
            <el-option v-for="item in waterOptions" :key="item.value" :label="item.label" :value="item.value"></el-option>
          </el-select>
          <div style="font-size: 16px;font-weight: 500;color: #333333;line-height: 22px;">
            {{waterParamName}}：{{waterComputed}}
          </div>
        </div>
        <div style="width: 100%;margin-top: 20px">
          <div id="environmental-annular2" ref="environmental-annular2" style="width: 100%;height: 270px"></div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import quarter from '@/components/quarter'
import BaiduMap from 'vue-baidu-map'
import Vue from 'vue'
const echarts = require('echarts')
Vue.use(BaiduMap, {
  ak: 'vZi9dnlQaFQ3LYO8yOdeHjaGjwGWGHy4'
})
export default {
  components: {
    quarter
  },
  data () {
    return {
      // 园区管理
      msg: '',
      intervalId: null,
      year1: '',
      selecedYear1: '',
      pickerOptions: {
        disabledDate: time => {
          return time.getTime() > new Date(new Date().getFullYear(), new Date().getMonth() + 1, 0)
        }
      },
      entList: [],
      parkCode: '',
      parkCode2: '', // 取园区介绍用
      center: { lng: 119.406504, lat: 29.54873 },
      centerList: [],
      map: '',
      parkRankDate: 0,
      statistics: 0,
      zoom: 11,
      parkOption1: {},
      enterpriseStatisticsSelect: '1',
      enterpriseStatisticsOptions: [
        { label: '企业名称', value: '1' },
        { label: '规上企业', value: '2' },
        { label: '含重大危险源企业', value: '3' },
        { label: '安全生产标准化一级企业', value: '4' }
      ],

      // 安全生产
      now: '',
      nowTime: '', // 当前时间
      checked: true, // 显示平均值
      alarmSearchType: 'day', // 报警趋势分析日(day)月(month)年(year)切换，初始化时默认选择day
      option2SData1: [], // 风险管控柱状图平均值
      safetyOption1: {},
      safetyOption2: {},
      safetyOption3: {},
      safetyOption4: {},

      topOneShow: 0,
      showData: 0,
      topTwoData: 0,
      bottomOneShow: 0,
      bottomTwoData: 0,
      year: '2021',
      parkRankValue: '0', // 增加值
      industryRankValue: '0', // 增加值
      quotaAnalysisValue: null,
      energyConsumptionValue: [],
      parkRank: [
        { label: '增加值', value: '0' },
        { label: '产值', value: '1' }
      ],
      industryRank: [
        { label: '增加值', value: '0' },
        { label: '产值', value: '1' }
      ],
      bottomTwoXData: [ '1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月' ],
      quotaAnalysis: [],
      energyConsumption: [],
      option1Data: [],
      optionYData: [],
      option1XData: [],
      option2Data: [],
      option3Data: [],
      option3XData: [],
      option4Data: [],
      option5XData: [],
      option51Data: [],
      option52Data: [],
      option5PartData: [],
      energyOption1: {},
      energyOption2: {},
      energyOption3: {},
      energyOption4: {},
      energyOption5: {},
      energyChart1: {},
      energyChart2: {},
      energyChart3: {},
      energyChart4: {},
      energyChart5: {},
      tableData1: [],
      tableData2: [],

      carbonDatePickerParam: {
        format: 'yyyy-MM-dd',
        type: 'date',
        placeholder: '选择日'
      },
      airDatePickerParam: {
        format: 'yyyy',
        type: 'year'
      },
      waterDatePickerParam: {
        format: 'yyyy',
        type: 'year'
      },
      treeData: [],
      defaultProps: {
        children: 'children',
        label: 'label'
      },
      airOptions: [],
      waterOptions: [],
      loading: {
        treeLoading: false,
        tableLoading: false
      },
      searchParams: {
        dateWindow: '',
        searchDate: '',
        parkCode: ''
      },
      options: [
        { label: '日', value: '0' },
        { label: '月', value: '1' },
        { label: '年', value: '2' }
      ],
      tableData: [],
      tableColumList: [],
      parkOptions: [],
      airDate: '',
      waterDate: '',
      waterDiv: 'year',
      airDiv: 'year',
      airParameter: 'aqi100',
      waterParameter: 'temperature',
      airParamName: '',
      waterParamName: '',
      airComputed: '',
      waterComputed: '',
      pickerOption: {
        disabledDate (time) {
          return time.getTime() > new Date().getTime()
        }
      },
      myChart1: {},
      myChart2: {},
      option1: {},
      option2: {},
      environmentalOption1XData: [],
      environmentalOption1Data: [],
      environmentalOption2XData: [],
      environmentalOption2Data: []
    }
  },
  mounted () {
    this.now = new Date()
    this.nowTime = this.formatDate(this.now, 'yyyy-MM-dd')
    this.setEchart1()
    this.setEchart2()
    this.setEchart3()
    this.setEchart4()

    this.year1 = new Date()
    this.selecedYear1 = this.year1.getFullYear()
    this.initParkRank()

    this.renderEnergyChart1()
    this.renderEnergyChart2()
    this.renderEnergyChart3()
    this.renderEnergyChart4()
    this.renderEnergyChart5()
    this.getParkInfoCityCode()

    this.initDate()
    this.renderMyChart1()
    this.renderMyChart2()
    this.selectAirCombobox()
    this.selectWaterCombobox()

    this.parkChange(this.$route.query.data)
    window.onresize = () => {
      this['annular1'].resize()
      this['annular2'].resize()
      this['annular3'].resize()
      this['annular4'].resize()

      this.energyChart1.resize()
      this.energyChart2.resize()
      this.energyChart3.resize()
      this.energyChart4.resize()
      this.energyChart5.resize()

      this.myChart1.resize()
      this.myChart2.resize()
    }
  },
  methods: {
    start () {
      // 如果当前为start，再点击start，则无效，只有当点击stop后再点击start才有效
      if (this.intervalId != null) {
        return
      }
      // 启动计时器
      this.intervalId = setInterval(() => {
        var start = this.msg.substring(0, 1)
        // 获取到 后面的所有字符
        var end = this.msg.substring(1)
        // 前后重新拼接得到新的字符串，并赋值给 this.msg
        this.msg = end + start
      }, 800)// 200为间隔时间
    },
    // 搜索园区地图
    SearchPark (val) {
      if (this.map) {
        let map = this.map
        // 清空坐标
        map.clearOverlays()

        if (this.centerList.length > 0) {
          this.centerList.forEach((item) => {
            var point = new BMap.Point(item.longitude, item.latitude)
            map.setMapType(BMAP_HYBRID_MAP)
            var marker = new BMap.Marker(point) // 创建标注
            marker.setTitle(item.name)
            map.addOverlay(marker) // 将标注添加到地图中
            var circle = new BMap.Circle(point, 6, {
              strokeColor: 'Red',
              strokeWeight: 6,
              strokeOpacity: 1,
              Color: 'Red',
              fillColor: '#f03'
            })
            map.addOverlay(circle)
            window.map = map
          })
        }
      }
    },
    // 企业统计下拉框改变
    enterpriseStatisticsSelectChange () {
      this.entList = []
      this.selecedYear1 = this.year1.getFullYear().toString()
      let params = {}
      params.enterpriseType = this.enterpriseStatisticsSelect
      params.parkCode = this.parkCode
      params.years = this.selecedYear1
      this.$http.post(`/home/chemical/parkInfo/getEnterpriseNew`, params).then(({ data: res }) => {
        if (res.code === 0) {
          res.data.forEach(item => {
            this.entList.push(
              {
                entName: item
              }
            )
          })
        }
      })
    },
    handler ({ BMap, map }) {
      this.map = map
      map.setMapType(BMAP_HYBRID_MAP)
      if (this.centerList.length > 0) {
        this.center.lng = this.centerList[0].cityLongitude
        this.center.lat = this.centerList[0].cityLatitude
        this.centerList.forEach((item) => {
          var point = new BMap.Point(item.longitude, item.latitude)
          var marker = new BMap.Marker(point) // 创建标注
          marker.setTitle(item.name)
          map.addOverlay(marker) // 将标注添加到地图中
          var circle = new BMap.Circle(point, 6, {
            strokeColor: 'Red',
            strokeWeight: 6,
            strokeOpacity: 1,
            Color: 'Red',
            fillColor: '#f03'
          })
          map.addOverlay(circle)
          window.map = map
        })
      }
    },
    getClickInfo (e) {
      this.center.lng = e.point.lng
      this.center.lat = e.point.lat
    },
    // 初始化园区经济排名
    initParkRank () {
      let parkRank = echarts.init(this.$refs['parkRank'])
      parkRank.clear()
      this.parkOption1 = {
        grid: {
          bottom: '10%'
        },
        legend: {
          orient: 'horizontal',
          left: '3%',
          icon: 'rect',
          itemWidth: 12,
          itemHeight: 12,
          textStyle: {
            fontSize: 14,
            fontWeight: 400
          },
          type: 'scroll'
        },
        tooltip: {
          trigger: 'item'
        },
        xAxis: {
          show: true,
          type: 'category',
          data: []
        },
        yAxis: {
          type: 'value',
          name: '(亿元)',
          axisTick: {
            show: false
          }
        },
        series: [
        ]
      }
      parkRank.setOption(this.parkOption1)
    },
    // 切换园区
    parkChange (data) {
      if (data === '[object Object]') {
        let parkDetail = JSON.parse(sessionStorage.getItem('zfParkManagementParkCode'))
        this.parkCode = parkDetail.code
        this.searchParams.parkCode = parkDetail.code
        this.centerList = parkDetail.coordinateList
      } else {
        sessionStorage.setItem('zfParkManagementParkCode', JSON.stringify(data))
        this.parkCode = data.code
        this.searchParams.parkCode = data.code
        this.centerList = data.coordinateList
      }
      this.getIntroduce()
      this.enterpriseStatisticsSelect = '1'
      this.fetchData()
      this.SearchPark()
      this.enterpriseStatisticsSelectChange()
      this.getData()
      this.getIndustriesData()
      this.selectAirQualityCount()
      this.selectWaterQualityCount()
      this.selectCarbonList()
    },
    // 取园区介绍
    getIntroduce () {
      this.parkCode2 = this.$route.query.data.code
      this.$http.post(`/home/chemical/parkInfo/getParkDetailByCode`, {
        parkCode: this.parkCode2
      }).then(({ data: res }) => {
        if (res.code === 0) {
          this.msg = res.data.parkDetails
          this.start()
        }
      })
    },
    // 初始化查询数据
    fetchData () {
      let params = {}
      params.enterpriseType = this.enterpriseStatisticsSelect
      params.parkCode = this.parkCode
      this.$http.post(`/home/chemical/parkInfo/getParkManagement`, params).then(({ data: res }) => {
        if (res.code === 0) {
          let data = []
          if (res.data.parkInfoOutputArray && res.data.parkInfoOutputArray.length > 0) {
            this.parkRankDate = 0
            this.parkOption1.xAxis.show = true
            this.parkOption1.yAxis.show = true
            res.data.parkInfoOutputArray.forEach((item) => {
              let params = {}
              params.type = 'bar'
              params.data = item.value
              params.name = item.name[0]
              data.push(params)
              this.parkOption1.series = data
              this.parkOption1.xAxis.data = item.years
            })
          } else {
            this.parkOption1.series = data
            this.parkOption1.xAxis.data = []
            this.parkOption1.xAxis.show = false
            this.parkOption1.yAxis.show = false
            this.parkRankDate = 1
          }
          let parkRank = echarts.init(this.$refs['parkRank'])
          parkRank.clear()
          parkRank.setOption(this.parkOption1)
        }
      })
    },

    getData () {
      this.$http.post(`/home/chemical/parkInfo/getSafetyProductionInfoOld`,
        {
          page: 1,
          limit: 10,
          alarmSearchType: 'day',
          searchDate: this.nowTime,
          accidentYears: 1,
          parkCode: this.parkCode // 风险管控和报警趋势分析园区选择默认第一个园区
        }
      ).then(({ data: res }) => {
        if (res.code === 0) {
          // 园区专职安全人员数量
          this.safetyOption1.xAxis.data = res.data.parkSafetyCount.dateList
          let arr1 = [] // 园区安全人员
          let arr1Legend = [] // 园区安全人员图例
          for (let i in res.data.parkSafetyCount.safeOfficeMap) {
            arr1.push({
              name: i,
              type: 'line',
              data: res.data.parkSafetyCount.safeOfficeMap[i],
              emphasis: {
                focus: 'series'
              }
            })
            arr1Legend.push(i)
          }
          this.safetyOption1.series = arr1
          this.safetyOption1.legend.data = arr1Legend
          // 风险管控
          this.safetyOption2.xAxis.data = res.data.riskPointCount.dateList
          this.option2SData1[0] = res.data.riskPointCount.riskPointAvg3
          this.option2SData1[1] = res.data.riskPointCount.riskPointAvg2
          this.option2SData1[2] = res.data.riskPointCount.riskPointAvg1
          this.option2SData1[3] = res.data.riskPointCount.riskPointAvg0

          if (this.checked === true) { // 显示平均值就给柱状图赋值
            this.safetyOption2.series[0].data = this.option2SData1[0]
            this.safetyOption2.series[1].data = this.option2SData1[1]
            this.safetyOption2.series[2].data = this.option2SData1[2]
            this.safetyOption2.series[3].data = this.option2SData1[3]
          }

          this.safetyOption2.series[4].data = res.data.riskPointCount.riskPointSum3
          this.safetyOption2.series[5].data = res.data.riskPointCount.riskPointSum2
          this.safetyOption2.series[6].data = res.data.riskPointCount.riskPointSum1
          this.safetyOption2.series[7].data = res.data.riskPointCount.riskPointSum0
          this['annular2'].setOption(this.safetyOption2)
          // 报警趋势分析
          this.safetyOption3.xAxis[0].data = res.data.alarmCount.dateList
          this.safetyOption3.series[0].data = res.data.alarmCount.alarmCountAvgList
          this.safetyOption3.series[1].data = res.data.alarmCount.alarmCountList
          this['annular3'].setOption(this.safetyOption3)
          // 园区事故
          this.safetyOption4.xAxis[0].data = res.data.accidentCount.dateList
          let arr4 = [] // 园区事故
          let arr4Legend = [] // 园区事故图例
          // 园区事故数量柱状图
          for (let i in res.data.accidentCount.accidentSumMap) {
            arr4.push({
              name: i,
              type: 'bar',
              yAxisIndex: 0,
              emphasis: {
                focus: 'series'
              },
              data: res.data.accidentCount.accidentSumMap[i]
            })
            arr4Legend.push(i)
          }
          // 同比折线堆叠图
          for (let i in res.data.accidentCount.yoyMap) {
            let arr4Line = []
            arr4Line = res.data.accidentCount.yoyMap[i]
            arr4.push({
              name: i + '同比(%)',
              type: 'line',
              yAxisIndex: 1,
              emphasis: {
                focus: 'series'
              },
              data: arr4Line
            })
            arr4Legend.push(i + '同比(%)')
          }
          this.safetyOption4.series = arr4
          this.safetyOption4.legend.data = arr4Legend
          this['annular1'].setOption(this.safetyOption1, true)
          this['annular4'].setOption(this.safetyOption4, true)
        }
      })
    },
    setEchart1 () {
      this['annular1'] = echarts.init(document.getElementById('safety-annular1'))
      this.safetyOption1 = {
        legend: {
          type: 'scroll',
          top: '5%',
          left: '1%',
          data: []
        },
        grid: {
          left: '5%',
          right: '4%',
          bottom: '14%',
          top: '22%'
        },
        tooltip: {
          trigger: 'axis'
        },
        xAxis: {
          type: 'category',
          data: []
        },
        yAxis: {
          type: 'value'
        },
        series: [
          {
            type: 'line',
            data: []
          }
        ]
      }
      // 绘制图表
      this['annular1'].setOption(this.safetyOption1)
      this.annular1.resize()
    },
    setEchart2 () {
      this['annular2'] = echarts.init(document.getElementById('safety-annular2'))
      this.safetyOption2 = {
        tooltip: {
          trigger: 'axis'
        },
        legend: {
          top: '3%',
          left: '1%',
          data: ['重大风险', '较大风险', '一般风险', '低风险']
        },
        grid: {
          left: '3%',
          right: '4%',
          bottom: '5%',
          top: '20%',
          containLabel: true
        },
        xAxis: {
          type: 'category',
          data: []
        },
        yAxis: [
          {
            type: 'value',
            min: 0
          },
          {
            type: 'value',
            min: 0
          },
          {
            type: 'value',
            min: 0
          },
          {
            type: 'value',
            min: 0
          }
        ],
        series: [
          {
            name: '重大风险',
            type: 'bar',
            emphasis: {
              focus: 'series'
            },
            stack: 'total1',
            barWidth: 20,
            data: [],
            itemStyle: {
              normal: {
                color: '#F24545'
              }
            }
          },
          {
            name: '较大风险',
            type: 'bar',
            emphasis: {
              focus: 'series'
            },
            stack: 'total1',
            barWidth: 20,
            data: [],
            itemStyle: {
              normal: {
                color: '#FA9358'
              }
            }
          },
          {
            name: '一般风险',
            type: 'bar',
            emphasis: {
              focus: 'series'
            },
            stack: 'total1',
            barWidth: 20,
            data: [],
            itemStyle: {
              normal: {
                color: '#1492FF'
              }
            }
          },
          {
            name: '低风险',
            type: 'bar',
            emphasis: {
              focus: 'series'
            },
            stack: 'total1',
            barWidth: 20,
            data: [],
            itemStyle: {
              normal: {
                color: '#6DD993'
              }
            }
          },
          {
            name: '重大风险',
            type: 'line',
            stack: 'total2',
            data: [],
            itemStyle: {
              normal: {
                color: '#F24545',
                lineStyle: {
                  color: '#F24545'
                }
              }
            }
          },
          {
            name: '较大风险',
            type: 'line',
            stack: 'total2',
            data: [],
            itemStyle: {
              normal: {
                color: '#FA9358',
                lineStyle: {
                  color: '#FA9358'
                }
              }
            }
          },
          {
            name: '一般风险',
            type: 'line',
            stack: 'total2',
            data: [],
            itemStyle: {
              normal: {
                color: '#1492FF',
                lineStyle: {
                  color: '#1492FF'
                }
              }
            }
          },
          {
            name: '低风险',
            type: 'line',
            stack: 'total2',
            data: [],
            itemStyle: {
              normal: {
                color: '#6DD993',
                lineStyle: {
                  color: '#6DD993'
                }
              }
            }
          }
        ]
      }
      // 绘制图表
      this['annular2'].setOption(this.safetyOption2)
      this.annular2.resize()
    },
    setEchart3 () {
      this['annular3'] = echarts.init(document.getElementById('safety-annular3'))
      this.safetyOption3 = {
        backgroundColor: '#FFF',
        legend: {
          // type: 'scroll',
          top: '1%',
          left: '1%',
          data: ['报警数量均值', '报警数量']
        },
        grid: {
          left: '1%',
          right: '1%',
          top: '15%',
          bottom: '10%',
          containLabel: true
        },
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'cross',
            crossStyle: {
              color: '#999'
            }
          }
        },
        left: 'center',
        top: '11px',
        xAxis: [
          {
            type: 'category',
            data: [],
            axisPointer: {
              type: 'shadow'
            }
          }
        ],
        yAxis: [
          {
            type: 'value'
          },
          {
            axisLabel: {
              show: false
            },
            type: 'value'
          }
        ],
        series: [
          {
            name: '报警数量均值',
            type: 'bar',
            barWidth: '30px',
            data: [],
            color: '#1492FF'
          },
          {
            name: '报警数量',
            type: 'line',
            data: [],
            color: '#FA9358'
          }
        ]
      }
      // 绘制图表
      this['annular3'].setOption(this.safetyOption3)
      this.annular3.resize()
    },
    setEchart4 () {
      this['annular4'] = echarts.init(document.getElementById('safety-annular4'))
      this.safetyOption4 = {
        backgroundColor: '#FFF',
        legend: {
          type: 'scroll',
          top: '1%',
          left: '1%',
          data: []
        },
        grid: {
          left: '2%',
          right: '4%',
          top: '18%',
          bottom: '1%',
          containLabel: true
        },
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'cross',
            crossStyle: {
              color: '#999'
            }
          }
        },
        left: 'center',
        top: '11px',
        xAxis: [
          {
            type: 'category',
            data: [],
            axisPointer: {
              type: 'shadow'
            }
          }
        ],
        yAxis: [
          {
            type: 'value',
            name: '数量',
            minInterval: 1
          },
          {
            type: 'value',
            name: '同比',
            interval: 50,
            axisLabel: {
              formatter: '{value} %'
            }
          },
          {
            axisLabel: {
              show: false
            },
            type: 'value'
          }
        ],
        series: [
          {
            type: 'bar',
            barWidth: 30,
            emphasis: {
              focus: 'series'
            },
            data: []
          }
        ]
      }
      // 绘制图表
      this['annular4'].setOption(this.safetyOption4)
    },
    energyTrend (type) { // 报警趋势年月日选择
      this.alarmSearchType = type
      this.$http.post(`/home/chemical/parkAlarmRecord/selectParkAlarmCount`,
        {
          alarmSearchType: this.alarmSearchType,
          searchDate: this.nowTime,
          parkCode: this.parkCode
        }
      ).then(({ data: res }) => {
        if (res.code === 0) {
          this.safetyOption3.xAxis[0].data = res.data.dateList
          this.safetyOption3.series[0].data = res.data.alarmCountAvgList
          this.safetyOption3.series[1].data = res.data.alarmCountList
          this['annular3'].setOption(this.safetyOption3)
        }
      })
    },
    handleCheckChange (val) { // 风险管控显示平均值
      if (val) {
        this.safetyOption2.series[0].data = this.option2SData1[0]
        this.safetyOption2.series[1].data = this.option2SData1[1]
        this.safetyOption2.series[2].data = this.option2SData1[2]
        this.safetyOption2.series[3].data = this.option2SData1[3]
        this['annular2'].setOption(this.safetyOption2)
      } else {
        this.safetyOption2.series[0].data = []
        this.safetyOption2.series[1].data = []
        this.safetyOption2.series[2].data = []
        this.safetyOption2.series[3].data = []
        this['annular2'].setOption(this.safetyOption2)
      }
    },
    formatDate (date, fmt) {
      if (!date) return
      if (/(y+)/.test(fmt)) {
        fmt = fmt.replace(
          RegExp.$1,
          (date.getFullYear() + '').substr(4 - RegExp.$1.length)
        )
      }
      let o = {
        'M+': addZero(date.getMonth() + 1),
        'd+': addZero(date.getDate()),
        'h+': date.getHours(),
        'm+': date.getMinutes(),
        's+': date.getSeconds()
      }
      for (let k in o) {
        if (new RegExp(`(${k})`).test(fmt)) {
          let str = o[k] + ''
          fmt = fmt.replace(RegExp.$1, str)
        }
      }
      function addZero (num) {
        return num >= 10 ? num : '0' + num
      }
      return fmt
    },

    numFormat (num) {
      var parts = num.toString().split('.')
      parts[0] = parts[0].replace(/\B(?=(\d{3})+(?!\d))/g, ',')
      return parts.join('.')
    },
    getEnergyConsumptionValue (value) {
      if (value && value.length > 0) {
        this.energyConsumptionValue.push(value[0].code)
        this.getEnergyConsumptionValue(value[0].children)
      }
    },
    getIndustriesData () {
      this.$http
        .post(`/home/chemical/emsGovIndustries/getEmsGovIndustriesByCode`, {})
        .then(({ data: res }) => {
          if (res && res.code === 0) {
            this.energyConsumption = res.data
            this.getEnergyConsumptionValue(this.energyConsumption)
            this.getEnergyConsumption()
          } else {
            this.$message.warning(res.msg)
          }
        })
    },
    getParkInfoCityCode () {
      this.$http
        .post(`/home/chemical/parkInfo/getParkInfoCityCode`, {})
        .then(({ data: res }) => {
          if (res && res.code === 0) {
            let arr = []
            res.data.forEach((item) => {
              arr.push({
                value: item.cityCode,
                label: item.cityName
              })
            })
            arr.unshift({
              value: null,
              label: '浙江省'
            })
            this.quotaAnalysis = arr
          } else {
            this.$message.warning(res.msg)
          }
        })
    },
    getEnergyConsumption () {
      let industry = this.energyConsumptionValue[(this.energyConsumptionValue.length - 1)]
      this.$http
        .post(`/home/chemical/energyConsumption/getEnergyConsumptionYearsOld`, {
          region: this.quotaAnalysisValue,
          areaSumType: this.parkRankValue,
          industrySumType: this.industryRankValue,
          industry: industry,
          parkCode: this.parkCode
        })
        .then(({ data: res }) => {
          if (res && res.code === 0) {
            if (res.data.emsGovEnergyQuotasList) {
              let quotasArr = []
              res.data.emsGovEnergyQuotasList.forEach((item) => {
                quotasArr.push({
                  name: item.parkName,
                  amount: item.usedAmount,
                  proportion: item.usedProportion + '%'
                })
              })
              this.tableData1 = quotasArr
            }

            if (res.data.emsGovProductConsumsListOld) {
              let productArr = []
              res.data.emsGovProductConsumsListOld.forEach((item) => {
                productArr.push({
                  name: item.industriesName,
                  consumption: item.energyValue,
                  nationalStandard: item.nationalStandard,
                  IndustryStandard: item.industryStandard
                })
              })
              this.tableData2 = productArr
            }

            //  上一
            if (res.data.emsGovAreaConsums && res.data.emsGovAreaConsums.length > 0) {
              this.energyOption1.yAxis.data = []
              this.energyOption1.series = []
              this.energyOption1.yAxis.data = res.data.emsGovAreaConsums[0].years
              res.data.emsGovAreaConsums.forEach((item, index) => {
                this.energyOption1.series.push({
                  name: '',
                  zlevel: 1,
                  data: '',
                  type: 'bar',
                  legendHoverLink: false,
                  barGap: 0.1,
                  min: 0,
                  barWidth: '20px'
                })
                this.energyOption1.series[index].name = item.name[0]
                this.energyOption1.series[index].data = item.value
              })
              this.energyChart1.setOption(this.energyOption1, true)
              this.topOneShow = 0
            } else {
              this.energyOption1.yAxis.data = []
              this.energyOption1.series = []
              this.option1Data = []
              this.optionYData = []
              this.option1XData = []
              this.topOneShow = 1
              this.energyChart1.setOption(this.energyOption1, true)
            }

            // 上二
            if (res.data.emsGovYearConsumsOld && res.data.emsGovYearConsumsOld.length > 0) {
              this.option2Data = []
              let yearConsumsArr = []
              res.data.emsGovYearConsumsOld.forEach((item) => {
                let yearConsums = {
                  name: item.mediumName,
                  value: item.energyValue,
                  medium: item.medium
                }
                yearConsumsArr.push(yearConsums)
                this.topTwoData = 0
              })
              this.option2Data = yearConsumsArr
            } else {
              // 当没有数据时，控制中间的tec不显示
              this.option2Data = []
              this.topTwoData = 1
            }
            //  上三
            if (res.data.emsGovIndustryConsums && res.data.emsGovIndustryConsums.length > 0) {
              this.option3Data = res.data.emsGovIndustryConsums[1]
              this.option3XData = res.data.emsGovIndustryConsums[0]
              this.showData = 0
            } else {
              this.option3Data = res.data.emsGovIndustryConsums[1]
              this.option3XData = res.data.emsGovIndustryConsums[0]
              this.showData = 1
            }

            // 下二
            if (res.data.emsGovMonthConsumsOld && res.data.emsGovMonthConsumsOld.length > 0) {
              this.bottomTwoXData = [
                '1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月'
              ]
              this.energyOption4.series = []
              let monthEnergyType = []
              this.option2Data.forEach((yearEnergy) => {
                let series = {
                  name: yearEnergy.name,
                  type: 'bar',
                  stack: 'total',
                  emphasis: {
                    focus: 'series'
                  },
                  data: []
                }
                res.data.emsGovMonthConsumsOld.forEach((monthEnergy) => {
                  if (yearEnergy.name === monthEnergy.key) {
                    series.data = monthEnergy.value.map(item => {
                      return item.energyValue
                    })
                    monthEnergyType.push(monthEnergy.key)
                  }
                })
                this.energyOption4.series.push(series)
              })
              res.data.emsGovMonthConsumsOld.forEach((monthEnergy) => {
                if (monthEnergyType.indexOf(monthEnergy.key) === -1) {
                  let energyValue = monthEnergy.value.map(item => {
                    return item.energyValue
                  })
                  let series = {
                    name: monthEnergy.key,
                    type: 'bar',
                    stack: 'total',
                    emphasis: {
                      focus: 'series'
                    },
                    data: energyValue
                  }
                  this.energyOption4.series.push(series)
                }
              })
              this.bottomTwoData = 0
              this.energyChart4.setOption(this.energyOption4, true)
            } else {
              this.bottomTwoXData = []
              this.bottomTwoData = 1
              this.energyOption4.series = []
              this.energyOption4.xAxis[0].data = []
              this.energyChart4.setOption(this.energyOption4, true)
            }

            //  下一
            if (res.data.monthEmsGovEnergyQuotas && res.data.monthEmsGovEnergyQuotas.length > 0) {
              this.energyOption5.series = []

              this.energyOption5.xAxis.data =
                res.data.monthEmsGovEnergyQuotas[0].months
              var arr = 0
              res.data.monthEmsGovEnergyQuotas.forEach((item, index) => {
                this.energyOption5.series.push(
                  {
                    name: '已用额度',
                    type: 'bar',
                    data: '',
                    stack: '',
                    barGap: '-100%'
                  },
                  {
                    name: '未用额度',
                    type: 'bar',
                    data: '',
                    stack: '',
                    barGap: 0.1
                  }
                )
                this.energyOption5.series[arr].name = item.name[0] + '已用额度'
                this.energyOption5.series[arr].data = item.value
                this.energyOption5.series[arr].stack = item.name[0]

                arr += 1
                this.energyOption5.series[arr].name = item.name[0] + '未用额度'
                this.energyOption5.series[arr].data = item.usedPlannedValue.map(
                  (item1, index1) => {
                    let num = Number(item1) - Number(item.value[index1])
                    return String(num)
                  }
                )
                this.energyOption5.series[arr].stack = item.name[0]
                arr += 1
              })
              this.bottomOneShow = 0
              this.energyChart5.setOption(this.energyOption5, true)
            } else {
              this.energyOption5.series = []

              this.energyOption5.xAxis.data = []
              this.option5XData = []
              this.option51Data = []
              this.option52Data = []
              this.option5PartData = []
              this.bottomOneShow = 1
              this.energyChart5.setOption(this.energyOption5, true)
            }
            this.year = res.data.years
            this.renderEnergyChart2()
            this.renderEnergyChart3()
          } else {
            this.$message.warning(res.msg)
          }
        })
    },
    // 化工行业万元能耗园区排名渲染(上一)
    renderEnergyChart1 () {
      this.energyChart1 = ''
      this.energyChart1 = echarts.init(document.getElementById('energy-annular1'))
      // 化工行业万元能耗园区排名
      this.energyOption1 = {
        grid: {
          left: '15%',
          top: '9%',
          bottom: '10%'
        },
        xAxis: {
          show: true,
          min: 0
        },
        yAxis: {
          show: true,
          inverse: true,
          type: 'category',
          animationDuration: 300,
          animationDurationUpdate: 300,
          axisLine: true,
          data: '',
          axisLabel: {
            show: true
          }
        },
        tooltip: {
          trigger: 'item'
        },
        legend: {
          orient: 'horizontal',
          left: '3%',
          type: 'scroll'
        },
        series: [],
        animationDuration: 0,
        animationDurationUpdate: 3000,
        animationEasing: 'linear',
        animationEasingUpdate: 'linear'
      }

      // 使用刚指定的配置项和数据显示图表。
      this.energyChart1.setOption(this.energyOption1)
    },
    // 累计总能消耗渲染   上二
    renderEnergyChart2 () {
      this.energyChart2 = echarts.init(document.getElementById('energy-annular2'))
      let arr = []
      let total = this.option2Data.reduce(
        (acc, current) => acc + current.value,
        0
      )
      this.option2Data.forEach((item) => {
        arr.push({
          value: item.value,
          medium: item.medium,
          name:
            item.name +
            ' ' +
            this.numFormat(item.value) +
            ' ' +
            ((item.value / total) * 100).toFixed(0) +
            '%'
        })
      })

      // 浙江省化工产业2021年累计总能消耗
      this.energyOption2 = {
        color: ['#FF6B00', '#FFC000', '#70AD47', '#1492FF', '#99CBF9'],
        tooltip: {
          trigger: 'item',
          formatter: '{b}'
        },
        legend: {
          top: '86%',
          orient: 'horizontal',
          left: '3%',
          right: '3%',
          type: 'scroll',
          formatter: function (name) {
            let arr = name.split(' ')
            let part1 = arr[0] + ' ' + arr[1]
            let part2 = arr[2]
            let richText = [
              '{a|' + part1 + '}' +
              ' {b|' + part2 + '}'
            ]
            return richText
          },
          textStyle: {
            rich: {
              a: {
              },
              b: {
                fontWeight: 'bold'
              }
            }
          }
        },
        graphic: [
          {
            type: 'text',
            left: 'center',
            top: '36%',
            style: {
              text: this.numFormat(total),
              textAlign: 'center',
              fill: '#000',
              width: 30,
              height: 30,
              fontSize: 20,
              color: '#4d4f5c'
            }
          },
          {
            type: 'text',
            left: 'center',
            top: '42%',
            style: {
              text: 'tce',
              textAlign: 'center',
              fill: '#000',
              width: 30,
              height: 30,
              fontSize: 14
            }
          }
        ],
        series: [
          {
            name: '',
            type: 'pie',
            radius: ['40%', '65%'],
            center: ['50%', '40%'],
            avoidLabelOverlap: false,
            label: {
              show: false,
              position: 'center'
            },
            detail: {
              show: false
            },
            labelLine: {
              show: false
            },
            data: arr
          }
        ]
      }

      // 使用刚指定的配置项和数据显示图表。
      this.energyChart2.setOption(this.energyOption2)
      let that = this
      this.energyChart2.off('click')
      this.energyChart2.on('click', function (param) {
        if (param.data) {
          that.changeMedium(param.data.name)
        } else {
          that.changeMediumAll('All')
        }
      })
    },
    // 化工行业万元能耗产业排名渲染
    renderEnergyChart3 () {
      this.energyChart3 = echarts.init(document.getElementById('energy-annular3'))

      // 化工行业万元能耗产业排名
      this.energyOption3 = {
        color: ['#2690F3'],
        grid: {
          left: '10%',
          top: '3%',
          bottom: '10%'
        },
        xAxis: {
          show: true,
          min: 0
        },
        yAxis: {
          inverse: true,
          show: true,
          type: 'category',
          axisLine: true,
          data: this.option3XData
        },
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
          },
          formatter: '{b}：{c}'
        },
        series: [
          {
            data: this.option3Data,
            type: 'bar',
            min: 0,
            barWidth: '10px',
            backgroundStyle: {
              color: 'rgba(207, 207, 207, 1)'
            },
            label: {
              show: true,
              position: 'right',
              valueAnimation: true,
              formatter: '{c}'
            }
          }
        ]
      }

      // 使用刚指定的配置项和数据显示图表。
      this.energyChart3.setOption(this.energyOption3)
    },
    // 月度能耗趋势渲染   下二
    renderEnergyChart4 () {
      this.energyChart4 = echarts.init(document.getElementById('energy-annular4'))
      // 浙江省化工产业月度能耗趋势
      this.energyOption4 = {
        color: ['#FF6B00', '#FFC000', '#70AD47', '#1492FF', '#99CBF9'],
        legend: {
          top: '7px',
          orient: 'horizontal',
          left: '3%',
          right: '3%',
          type: 'scroll'
        },
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
          }
        },

        grid: {
          left: '3%',
          right: '4%',
          bottom: '5%',
          top: '15%',
          containLabel: true
        },
        xAxis: [
          {
            axisLine: { show: false },
            axisTick: { show: false },
            type: 'category',
            axisLabel: { interval: 0, rotate: 30 },
            data: this.bottomTwoXData
          }
        ],
        yAxis: [
          {
            type: 'value',
            min: 0
          },
          {
            type: 'value',
            min: 0
          },
          {
            type: 'value',
            min: 0
          },
          {
            type: 'value',
            min: 0
          },
          {
            type: 'value',
            min: 0
          }
        ],
        series: []
      }

      // 使用刚指定的配置项和数据显示图表。
      this.energyChart4.setOption(this.energyOption4)
    },
    // 园区能源用能额度分析(下一)
    renderEnergyChart5 () {
      this.energyChart5 = echarts.init(document.getElementById('energy-annular5'))
      // 园区能源用能额度分析
      this.energyOption5 = {
        tooltip: {
          trigger: 'item'
        },
        legend: {
          orient: 'horizontal',
          left: '3%',
          type: 'scroll',
          top: '7px'
        },
        grid: {
          left: '3%',
          right: '4%',
          bottom: '5%',
          top: '15%',
          containLabel: true
        },
        xAxis: {
          data: [],
          axisLine: { show: false },
          axisTick: { show: false },
          axisLabel: { interval: 0, rotate: 30 }
        },

        yAxis: [
          {
            type: 'value'
          }
        ],
        series: [
          {
            name: '已用额度',
            type: 'bar',
            companyName: '',
            stack: '',
            barGap: 0.1,
            data: ''
          },
          {
            name: '未用额度',
            type: 'bar',
            companyName: '',
            stack: '',
            barGap: '-100%',
            data: ''
          }
        ]
      }
      // 使用刚指定的配置项和数据显示图表。
      this.energyChart5.setOption(this.energyOption5)
    },
    // 化工行业万元能耗园区排名选项(上一)
    changeParkRank () {
      this.energyOption1.yAxis.data = []
      this.energyOption1.series = []
      this.$http
        .post(`/home/chemical/energyConsumption/getEmsGovAreaConsums`, {
          areaSumType: this.parkRankValue,
          parkCode: this.parkCode
        })
        .then(({ data: res }) => {
          if (res && res.code === 0) {
            if (res.data.length > 0) {
              this.topOneShow = 0
            } else {
              this.topOneShow = 1
            }

            this.energyOption1.series = []
            res.data.forEach((item, index) => {
              this.energyOption1.yAxis.data = item.years
              this.energyOption1.series.push({
                name: '',
                zlevel: 1,
                data: '',
                type: 'bar',
                legendHoverLink: false,
                barGap: 0.1,
                min: 0,
                barWidth: '20px'
              })
              this.energyOption1.series[index].name = item.name[0]
              this.energyOption1.series[index].data = item.value
            })
            this.energyChart1.setOption(this.energyOption1, true)
          } else {
            this.$message.warning(res.msg)
          }
        })
    },
    // 化工行业万元能耗产业排名选项
    changeIndustryRank () {
      this.$http
        .post(`/home/chemical/energyConsumption/getEmsGovIndustryConsums`, {
          industrySumType: this.industryRankValue,
          parkCode: this.parkCode
        })
        .then(({ data: res }) => {
          if (res && res.code === 0) {
            if (res.data.length > 0) {
              this.option3Data = res.data[1]
              this.option3XData = res.data[0]
              this.energyOption3.yAxis.data = this.option3XData
              this.energyOption3.series[0].data = this.option3Data
              this.energyChart3.setOption(this.energyOption3, true)
              this.showData = 0
            } else {
              this.option3Data = res.data[1]
              this.option3XData = res.data[0]
              this.energyOption3.yAxis.data = this.option3XData
              this.energyOption3.series[0].data = this.option3Data
              this.energyChart3.setOption(this.energyOption3, true)
              this.showData = 1
            }
          } else {
            this.$message.warning(res.msg)
          }
        })
    },
    // 行业主要产品单位产品能耗选项
    changeEnergyConsumption () {
      let industry = this.energyConsumptionValue[(this.energyConsumptionValue.length - 1)]
      this.$http
        .post(`/home/chemical/energyConsumption/getEmsGovProductConsums`, {
          industry: industry,
          parkCode: this.parkCode
        })
        .then(({ data: res }) => {
          if (res && res.code === 0) {
            let productArr = []
            res.data.forEach((item) => {
              productArr.push({
                name: item.industriesName,
                consumption: item.energyValue,
                nationalStandard: item.nationalStandard,
                IndustryStandard: item.industryStandard
              })
            })
            this.tableData2 = productArr
          } else {
            this.$message.warning(res.msg)
          }
        })
    },
    changeMedium (medium) {
      let mediumParam = ''
      let arr = medium.split(' ')
      let mediumName = arr[0]
      this.option2Data.forEach((item) => {
        if (item.name === mediumName) {
          mediumParam = item.medium
        }
      })
      this.$http
        .post(`/home/chemical/energyConsumption/getEmsGovMonthConsums`, {
          medium: mediumParam,
          parkCode: this.parkCode
        })
        .then(({ data: res }) => {
          if (res && res.code === 0) {
            let monthConsums = {
              key: ''
            }
            if (res.data.length > 0) {
              monthConsums = res.data[0]
            }
            this.energyOption4.series.forEach((item) => {
              if (item.name === monthConsums.key) {
                item.data = monthConsums.value.map(item => {
                  return item.energyValue
                })
              } else {
                item.data = []
              }
            })
            this.energyChart4.setOption(this.energyOption4, true)
          } else {
            this.$message.warning(res.msg)
          }
        })
    },
    changeMediumAll () {
      let industry = this.energyConsumptionValue[(this.energyConsumptionValue.length - 1)]
      this.$http
        .post(`/home/chemical/energyConsumption/getEnergyConsumptionYearsOld`, {
          region: this.quotaAnalysisValue,
          areaSumType: this.parkRankValue,
          industrySumType: this.industryRankValue,
          industry: industry,
          parkCode: this.parkCode
        })
        .then(({ data: res }) => {
          if (res && res.code === 0) {
            this.energyOption4.series = []
            let monthEnergyType = []
            this.option2Data.forEach((yearEnergy) => {
              let series = {
                name: yearEnergy.name,
                type: 'bar',
                stack: 'total',
                emphasis: {
                  focus: 'series'
                },
                data: []
              }
              res.data.emsGovMonthConsumsOld.forEach((monthEnergy) => {
                if (yearEnergy.name === monthEnergy.key) {
                  series.data = monthEnergy.value.map(item => {
                    return item.energyValue
                  })
                  monthEnergyType.push(monthEnergy.key)
                }
              })
              this.energyOption4.series.push(series)
            })
            res.data.emsGovMonthConsumsOld.forEach((monthEnergy) => {
              if (monthEnergyType.indexOf(monthEnergy.key) === -1) {
                let energyValue = monthEnergy.value.map(item => {
                  return item.energyValue
                })
                let series = {
                  name: monthEnergy.key,
                  type: 'bar',
                  stack: 'total',
                  emphasis: {
                    focus: 'series'
                  },
                  data: energyValue
                }
                this.energyOption4.series.push(series)
              }
            })
            this.bottomTwoData = 0
            this.energyChart4.setOption(this.energyOption4, true)
          } else {
            this.$message.warning(res.msg)
          }
        })
    },

    getAirQuarter (quarter) {
      this.airDate = quarter
      this.selectAirQualityCount()
    },
    getWaterQuarter (quarter) {
      this.waterDate = quarter
      this.selectWaterQualityCount()
    },
    renderMyChart1 () {
      this.myChart1 = echarts.init(document.getElementById('environmental-annular1'))
      this.option1 = {
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'shadow'
          }
        },
        legend: {
          top: '0px',
          left: '30px',
          itemWidth: 12,
          itemHeight: 12,
          itemGap: 30
        },
        grid: {
          left: '3%',
          right: '4%',
          bottom: '5%',
          top: '20%',
          containLabel: true
        },
        xAxis: [
          {
            type: 'category',
            data: this.environmentalOption1XData,
            axisLabel: {
              interval: 0,
              rotate: 40
            }
          }
        ],
        yAxis: [
          {
            type: 'value',
            min: 0
          }
        ],
        series: [
          {
            name: '',
            type: 'bar',
            stack: 'total',
            barMaxWidth: 40,
            emphasis: {
              focus: 'series'
            },
            data: this.environmentalOption1Data
          }
        ]
      }
      this.myChart1.setOption(this.option1)
    },
    renderMyChart2 () {
      this.myChart2 = echarts.init(document.getElementById('environmental-annular2'))
      this.option2 = {
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'shadow'
          }
        },
        legend: {
          top: '0',
          left: '30px',
          itemWidth: 12,
          itemHeight: 12,
          itemGap: 30
        },
        grid: {
          left: '3%',
          right: '4%',
          bottom: '5%',
          top: '20%',
          containLabel: true
        },
        xAxis: [
          {
            type: 'category',
            data: this.environmentalOption2XData,
            axisLabel: {
              interval: 0,
              rotate: 40
            }
          }
        ],
        yAxis: [
          {
            type: 'value',
            min: 0
          }
        ],
        series: [
          {
            name: '',
            type: 'bar',
            stack: 'total',
            barMaxWidth: 40,
            emphasis: {
              focus: 'series'
            },
            data: this.environmentalOption2Data
          }
        ]
      }
      this.myChart2.setOption(this.option2)
    },
    // 空气质量下拉列表
    selectAirCombobox () {
      this.$http.get(`/home/chemical/parkAirQuality/selectAirCombobox`,
        {}
      ).then(({ data: res }) => {
        if (res && res.code === 0) {
          let data = res.data
          this.airOptions = res.data
          this.airParameter = data[0].value
          if (data[0].label === '优良天数') {
            this.airParamName = '优良总天数'
          } else if (data[0].label === '重污染天数') {
            this.airParamName = '重污染总天数'
          } else {
            this.airParamName = data[0].label + '平均值'
          }
        } else {
          this.$message.warning(res.msg)
        }
      })
    },
    // 水质监测下拉列表
    selectWaterCombobox () {
      this.$http.get(`/home/chemical/parkWaterQuality/selectWaterCombobox`,
        {}
      ).then(({ data: res }) => {
        if (res && res.code === 0) {
          let data = res.data
          this.waterOptions = res.data
          this.waterParameter = data[0].value
          this.waterParamName = data[0].label + '平均值'
        } else {
          this.$message.warning(res.msg)
        }
      })
    },
    // 碳排放管理列表
    selectCarbonList () {
      this.$http.post(`/home/chemical/emsGovCarbonStats/selectCarbonList`,
        {
          searchDate: this.searchParams.searchDate,
          dateWindow: this.searchParams.dateWindow,
          parkCode: this.searchParams.parkCode
        }
      ).then(({ data: res }) => {
        if (res && res.code === 0) {
          let carbonTitleArr = []
          let carbonListArr = []
          let carbonNo = 1
          let dayLists = []
          res.data.forEach((item) => {
            let titleIndex = carbonTitleArr.indexOf(item.group)
            if (titleIndex > -1) {
              carbonNo = carbonNo + 1
              carbonListArr.push(
                {
                  no: carbonNo.toString(),
                  name: item.name,
                  monthSum: item.monthValue,
                  yearSum: item.yearValue,
                  dayList: item.emsGovCarbonDetailVoList.map(item => {
                    return item.value.toString()
                  })
                }
              )
            } else {
              carbonNo = 1
              carbonTitleArr.push(item.group)
              carbonListArr.push(
                {
                  group: item.group,
                  title: carbonListArr.length + 1,
                  no: item.group,
                  dayList: []
                }
              )
              carbonListArr.push(
                {
                  no: '1',
                  name: item.name,
                  monthSum: item.monthValue,
                  yearSum: item.yearValue,
                  dayList: item.emsGovCarbonDetailVoList.map(item => {
                    return item.value.toString()
                  })
                }
              )
              dayLists = item.emsGovCarbonDetailVoList.map(item => {
                return item.queryDate.toString()
              })
            }
          })
          this.tableColumList = dayLists
          this.tableData = carbonListArr
        } else {
          this.$message.warning(res.msg)
        }
      })
    },
    // 空气质量echarts
    selectAirQualityCount () {
      this.$http.post(`/home/chemical/parkAirQuality/selectAirQualityCount`,
        {
          airColumn: this.airParameter,
          airSearchType: this.airDiv,
          searchDate: this.airDate,
          parkCode: this.searchParams.parkCode
        }
      ).then(({ data: res }) => {
        if (res && res.code === 0) {
          this.environmentalOption1XData = res.data.dateList
          let yAxis = []
          let series = []
          let dateArr = []
          let sum = 0
          let parkMap = res.data.parkMap
          for (var parkName in parkMap) {
            yAxis.push(
              {
                type: 'value',
                min: 0
              }
            )
            series.push(
              {
                name: parkName,
                type: 'bar',
                barMaxWidth: 40,
                emphasis: {
                  focus: 'series'
                },
                data: parkMap[parkName]
              }
            )
            // 计算总和
            let parkData = parkMap[parkName]
            parkData.forEach((value, index) => {
              if (value !== 0) {
                if (dateArr.indexOf(index) === -1) {
                  dateArr.push(index)
                }
                sum += value
              }
            })
          }
          if (dateArr.length !== 0) {
            if (this.airParamName === '优良总天数' || this.airParamName === '重污染总天数') {
              this.airComputed = sum
            } else {
              this.airComputed = (sum / dateArr.length).toFixed(2)
            }
          } else {
            this.airComputed = 0
          }
          this.option1.xAxis[0].data = this.environmentalOption1XData
          this.option1.yAxis = yAxis
          this.option1.series = series
          this.myChart1.setOption(this.option1, true)
        } else {
          this.$message.warning(res.msg)
        }
      })
    },
    // 水质监测echarts
    selectWaterQualityCount () {
      this.$http.post(`/home/chemical/parkWaterQuality/selectWaterQualityCount`,
        {
          waterColumn: this.waterParameter,
          waterSearchType: this.waterDiv,
          searchDate: this.waterDate,
          parkCode: this.searchParams.parkCode
        }
      ).then(({ data: res }) => {
        if (res && res.code === 0) {
          this.environmentalOption2XData = res.data.dateList
          let yAxis = []
          let series = []
          let dateArr = []
          let sum = 0
          let parkMap = res.data.parkMap
          for (var parkName in parkMap) {
            yAxis.push(
              {
                type: 'value',
                min: 0
              }
            )
            series.push(
              {
                name: parkName,
                type: 'bar',
                barMaxWidth: 40,
                emphasis: {
                  focus: 'series'
                },
                data: parkMap[parkName]
              }
            )
            // 计算总和
            let parkData = parkMap[parkName]
            parkData.forEach((value, index) => {
              if (value !== 0) {
                if (dateArr.indexOf(index) === -1) {
                  dateArr.push(index)
                }
                sum += value
              }
            })
          }
          if (dateArr.length !== 0) {
            this.waterComputed = (sum / dateArr.length).toFixed(2)
          } else {
            this.waterComputed = 0
          }
          this.option2.xAxis[0].data = this.environmentalOption2XData
          this.option2.yAxis = yAxis
          this.option2.series = series
          this.myChart2.setOption(this.option2, true)
        } else {
          this.$message.warning(res.msg)
        }
      })
    },
    // 初始化搜索类型、时间
    initDate () {
      var day1 = new Date()
      this.airDate = day1.getFullYear() + '-' + (day1.getMonth() + 1) + '-' + day1.getDate()
      this.waterDate = day1.getFullYear() + '-' + (day1.getMonth() + 1) + '-' + day1.getDate()
      this.searchParams.searchDate = day1.getFullYear() + '-' + (day1.getMonth() + 1) + '-' + day1.getDate()
      this.searchParams.dateWindow = '0'
    },
    // 搜索
    searchAction () {
      this.selectCarbonList()
    },
    // 切换碳排放时间窗口
    changeCarbonType (dateWindow) {
      this.searchParams.dateWindow = dateWindow
      if (dateWindow === '0') {
        this.carbonDatePickerParam.format = 'yyyy-MM-dd'
        this.carbonDatePickerParam.type = 'date'
        this.carbonDatePickerParam.placeholder = '选择日'
      } else if (dateWindow === '1') {
        this.carbonDatePickerParam.format = 'yyyy-MM'
        this.carbonDatePickerParam.type = 'month'
        this.carbonDatePickerParam.placeholder = '选择月'
      } else if (dateWindow === '2') {
        this.carbonDatePickerParam.format = 'yyyy'
        this.carbonDatePickerParam.type = 'year'
        this.carbonDatePickerParam.placeholder = '选择年'
      }
      this.$forceUpdate()
      this.selectCarbonList()
    },
    // 合并分组栏
    arraySpanMethod ({ row, column, rowIndex, columnIndex }) {
      if (row.title) {
        if (columnIndex === 0) {
          return [1, this.tableColumList.length + 3]
        }
      }
    },
    // 修改分组栏样式
    tableRowClassName ({ row, rowIndex }) {
      if (row.title) {
        return 'table_title'
      }
    },
    // 表头样式
    tableHeadClassName ({ row, rowIndex }) {
      return 'table_head'
    },
    // 空气质量时间维度切换
    airChange (param) {
      this.airDiv = param
      if (param === 'month') {
        this.airDatePickerParam.format = 'yyyy-MM'
        this.airDatePickerParam.type = 'month'
      } else if (param === 'year') {
        this.airDatePickerParam.format = 'yyyy'
        this.airDatePickerParam.type = 'year'
      }
      this.$forceUpdate()
      this.selectAirQualityCount()
    },
    // 水质监测时间维度切换
    waterChange (param) {
      this.waterDiv = param
      if (param === 'month') {
        this.waterDatePickerParam.format = 'yyyy-MM'
        this.waterDatePickerParam.type = 'month'
      } else if (param === 'year') {
        this.waterDatePickerParam.format = 'yyyy'
        this.waterDatePickerParam.type = 'year'
      }
      this.$forceUpdate()
      this.selectWaterQualityCount()
    },
    // 空气质量指标切换
    airParameterChange () {
      let arr = this.airOptions.filter((item) => {
        return item.value === this.airParameter
      })
      if (arr[0].label === '优良天数') {
        this.airParamName = '优良总天数'
      } else if (arr[0].label === '重污染天数') {
        this.airParamName = '重污染总天数'
      } else {
        this.airParamName = arr[0].label + '平均值'
      }
      this.selectAirQualityCount()
    },
    // 水质监测指标切换
    waterParameterChange () {
      let arr = this.waterOptions.filter((item) => {
        return item.value === this.waterParameter
      })
      this.waterParamName = arr[0].label + '平均值'
      this.selectWaterQualityCount()
    },
    // 空气质量查询日期切换
    airChangeYear () {
      this.selectAirQualityCount()
    },
    // 水质监测查询日期切换
    waterChangeYear () {
      this.selectWaterQualityCount()
    }
  }
}
</script>
<style lang="scss" scoped>
.safetyProduction {
  .safePersonCount {
    height: 350px;
    background: #FFFFFF;
    border: 1px solid #F0F0F0;
    box-shadow: 0px 0px 30px 0px rgba(0, 0, 0, 0.05);
    border-radius: 4px;
  }
  .safePersonCount_title {
    padding: 20px;
    text-align: center;
  }
  .title_sty{
    font-size: 18px;
    font-weight: 700;
  }
  .safePersonCount_charts {
    padding: 0px 20px 0px 20px;
    width: 100%;
  }
  .warnControll {
    height: 350px;
    background: #FFFFFF;
    border: 1px solid #F0F0F0;
    box-shadow: 0px 0px 30px 0px rgba(0, 0, 0, 0.05);
    border-radius: 4px;
  }
  .warnControll_charts {
    width: 100%;
    padding: 0px 20px 20px 20px;
  }
  .majorHazardAnalysis_charts{
    width: 100%;
    padding: 20px 20px 20px 20px;
  }
  .subject{
    width: 100%;
    .tab{
      display: flex;
      justify-content:flex-start;
      margin-top: 20px;
      .Unit{
        padding: 0 20px;
        width: 48%;
        background: #FFFFFF;
        border: 1px solid #F0F0F0;
        box-shadow: 0px 4px 5px 0px rgba(0, 0, 0, 0.03);
        margin-left: 1.4%;
      }
    }
  }
  .Unit-title{
    font-size: 18px;
    font-weight: 700;
    text-align: center;
    padding: 20px;
  }
  .Unit-title4{
    font-size: 18px;
    font-weight: 700;
    text-align: center;
    padding: 20px 20px 10px 20px;
  }
}
.parkManagement {
  .intrdouce{
    width:98%;
    height:26px;
    left:1%;
    top:8px;
    position:absolute;
    z-index:9999;border:1px solid blue;
    background-color:#FFFFFF;
    opacity:0.5;
    font-weight:600;
    font-size:20px;
    overflow: hidden;
  }
  .yuanqu{
    height: 730px;
    width: 100%;
    .left_baidu{
      position: relative;
      background: #FFFFFF;
      border: 1px solid #F0F0F0;
      box-shadow: 0px 5px 20px 0px rgba(0, 0, 0, 0.1);
      border-radius: 4px;
      height: 720px;
      width: 100%;
    }
    .right_all{
      height: 720px;
      width: 100%;
      margin-bottom: 20px;
      .right_top{
        height: 350px;
        width: 100%;
        background: #FFFFFF;
        border: 1px solid #F0F0F0;
        box-shadow: 0px 5px 20px 0px rgba(0, 0, 0, 0.1);
        border-radius: 4px;
      }
      .right_center{
        height: 350px;
        width: 100%;
        margin: 20px 0px 0px 0px;
        background: #FFFFFF;
        border: 1px solid #F0F0F0;
        box-shadow: 0px 5px 20px 0px rgba(0, 0, 0, 0.1);
        border-radius: 4px;
      }
    }
  }
}
.energyConsumption {
  width: 100%;
  padding: 5px 20px 20px 20px;
  .top {
    width: 100%;
    display: flex;
    .top-first {
      width: 32.4%;
      height: 446px;
      background: #ffffff;
      box-shadow: 0px 0px 30px 0px rgba(0, 0, 0, 0.05);
      border-radius: 4px;
      .top-title {
        height: 58px;
        line-height: 58px;
        text-align: center;
        font-size: 18px;
        font-weight: bold;
        color: #333333;
      }
      .top-sel {
        height: 41px;
        margin-top: 9px;
      }
    }
    .top-two {
      width: 32.4%;
      height: 446px;
      background: #ffffff;
      box-shadow: 0px 0px 30px 0px rgba(0, 0, 0, 0.05);
      margin-left: 1.4%;
      margin-right: 1.4%;
      border-radius: 4px;
      .top-title {
        height: 58px;
        line-height: 58px;
        text-align: center;
        font-size: 18px;
        font-weight: bold;
        color: #333333;
      }
      .top-sel {
        height: 41px;
        margin-top: 9px;
      }
    }
  }
  .bottom {
    width: 100%;
    display: flex;
    margin-top: 20px;
    .bottom-first {
      width: 32.4%;
      height: 499px;
      background: #ffffff;
      box-shadow: 0px 0px 30px 0px rgba(0, 0, 0, 0.05);
      border-radius: 4px;
      .bottom-title {
        height: 58px;
        line-height: 58px;
        text-align: center;
        font-size: 18px;
        font-weight: bold;
        color: #333333;
      }
      .bottom-sel {
        width: 100%;
        height: 35px;
        display: flex;
        justify-items: center;
        margin-bottom: 2px;
      }
      .bottom-tab {
        width: 100%;
        padding: 0px 20px 10px 20px;
      }
    }
    .bottom-two {
      width: 32.4%;
      height: 499px;
      margin: 0 1.4%;
      background: #ffffff;
      box-shadow: 0px 0px 30px 0px rgba(0, 0, 0, 0.05);
      border-radius: 4px;
      .bottom-title-two {
        height: 58px;
        line-height: 58px;
        text-align: center;
        font-size: 18px;
        font-weight: bold;
        color: #333333;
      }
    }
  }
  .el-cascader {
    margin-left: 20px;
    margin-right: 20px;
    width: 100%;
    height: 34px;
  }
  .select1 {
    width: 95px;
    height: 34px;
  }
  /deep/ .el-input__inner {
    padding: 0 10px;
    height: 34px;
    line-height: 34px;
  }
  /deep/ .el-input__icon {
    line-height: 34px;
  }
}
.environmental {
  padding: 0px 20px 20px 20px;
  .w106 {
      width: 130px;
  }
  .w180 {
      width: 180px;
  }
  .tree_title {
    font-size: 20px;
    font-weight: 700;
    height:40px;
    text-align: center;
  }
  .leftTree {
      width: 256px;
  }
  .shadow {
      background: #FFFFFF;
      border: 1px solid #F0F0F0;
      box-shadow: 0px 4px 5px 0px rgba(0, 0, 0, 0.03);
  }
  .tree_sty {
      width: 100%;
      height: 312px;
      overflow-y: auto;
  }
  .rightTable {
      margin-left: 0px;
  }
  /deep/ .el-table .table_title {
      text-align: left;
      font-size: 14px;
      color: #b1b1b1;
      font-weight: 800;
  }
  /deep/ .el-table .table_title .cell {
      text-align: left;
  }
  /deep/ .el-table .table_head {
      background-color: #f7f8fa;
  }
  .titleSelct {
    margin-left: 20px;
  }
  .rightTable {
    width: 100%;
  }
  .table_sty {
      width: 100%;
      overflow-y: auto;
  }
  .searchDay {
      margin-right: 10px;
      margin-left: 25px;
  }
  .titleDiv {
      height: 34px;
      line-height: 34px;
      text-align: center;
  }
  .localCity{
      width: 72px;
      height: 34px;
      background: #1C60AD;
      color: #ffffff;
      border-radius: 4px;
      font-size: 14px;
      font-weight: 400;
      float: left;
  }
  .changeTable {
      height: 34px;
  }
  .timeSelect {
      margin-left: 20px;
      width: 200px;
      float: left;
  }
  .btnDiv {
      height: 34px;
      margin-left: 30px;
      display: flex;
      float: right;
  }
  .mouseOver {
      cursor: pointer;
      font-size: 15px;
      font-weight: 400;
  }
  .divActice {
      border-bottom: 4px solid #409eff;
      color: #409eff;
  }
  .tableDivTitle {
    font-size: 16px;
    font-weight: 400;
    line-height: 32px;
  }
  /deep/ .report-data-picker-top {
      position: absolute;
      z-index: 2018;
  }
  .el-table /deep/ .el-table__body-wrapper {
    height: 303px !important;
  }
}
.functionTitle{
  background-image: linear-gradient(to right,#d0d2ec 1%, #ffffff 30%);
  font-size: 20px;
  font-weight: 700;
  padding: 5px;
}
</style>
